<template>
  <div class="betterScroll" ref="con"><div>
    <div class="Slide--lb">
      <van-swipe :autoplay="3000" indicator-color="white">
        <van-swipe-item class="Slide--box" v-for = "(item, key) in img" :key="key">
          <img :src="item.bannerUrl" alt=""></van-swipe-item>
      </van-swipe>
    </div>
    <div class="classification">
      <ul>
        <li>
          <img src="../assets/meinvfuhu.png" class="image"><br>
          <span class="tips">美妆护肤</span>
        </li>
        <li>
          <img src="../assets/mingpingwanbiao.png" class="image"><br>
          <span class="tips">名品腕表</span>
        </li>
        <li>
          <img src="../assets/chouzhijiafgang.png" class="image"><br>
          <span class="tips">超值家纺</span>
        </li>
        <li>
          <img src="../assets/chouliushipin.png" class="image"><br>
          <span class="tips">潮流饰品</span>
        </li>
        <li>
          <img src="../assets/shishagnxiangbao.png" class="image"><br>
          <span class="tips">时尚箱包</span>
        </li>
      </ul>
    </div>
    <div class="RushToBuy">
      <img class="RushToBuy--Violet" src="../assets/qianggou1.png">
      <img class="RushToBuy--Blue" src="../assets/qianggou2.png">
    </div>
    <div class="block"></div>
    <div class="Limited">
      <span class="Limited--text">限时秒杀</span>
      <span class="Limited--time">
        <span>距结束还有</span>
        <span>23</span>
        <span>:</span>
        <span>36</span>
        <span>:</span>
        <span>33</span>
      </span>
    </div>
    <div class="Limited--image">
      <span class="Limited--box" v-for="(item, key) in image" :key="key" @click="LimitedTime">
        <img :src="item.prodImage[1]" alt=""><br>
        <span class="PostCouponPrice">券后价</span>
      </span>
    </div>
    <div class="block"></div>
    <div class="activity">
      <div>
        <span class="Limited--text">精选活动</span>
        <img class="activity--lcon" src="../assets/wp.png">
        <span class="activity--commodity" v-for="(item, key) in Recommend" :key="key" @click="shoppingCart(key)">
        <img :src="item.prodImage[1]" alt=""><br>
        <span class="activityPrice">券后价</span>
      </span>
      </div>
      <div class="newYear">
        <img src="../assets/yera.png" alt="" class="activity--lcon">
        <span class="activity--commodity" v-for="(item, key) in Recommend" :key="key" @click="shoppingCart(key)">
        <img :src="item.prodImage[2]" alt=""><br>
        <span class="activityPrice">券后价</span>
      </span>
      </div>
      <div class="Department">
        <img src="../assets/Department.png" alt="" class="activity--lcon">
        <span class="activity--commodity" v-for="(item, key) in phone" :key="key" @click="shoppingCart(key)">
        <img :src="item.prodImage[3]" alt=""><br>
        <span class="activityPrice">券后价</span>
      </span>
      </div>
      <div class="WristWatch">
        <img src="../assets/WristWatch.png" alt="" class="activity--lcon">
        <span class="activity--commodity" v-for="(item, key) in phone" :key="key" @click="shoppingCart(key)">
        <img :src="item.prodImage[1]" alt=""><br>
        <span class="activityPrice">券后价</span>
      </span>
      </div>
      <div class="shine">
        <img src="../assets/shine.png" alt="" class="activity--lcon">
        <span class="activity--commodity" v-for="(item, key) in phone" :key="key" @click="shoppingCart(key)">
        <img :src="item.prodImage[0]" alt=""><br>
        <span class="activityPrice">券后价</span>
      </span>
      </div>
      <div class="shine">
        <img src="../assets/parts.png" alt="" class="activity--lcon">
        <span class="activity--commodity" v-for="(item, key) in phone" :key="key" @click="shoppingCart(key)">
        <img :src="item.prodImage[1]" alt=""><br>
        <span class="activityPrice">券后价</span>
      </span>
      </div>
      <div class="bags">
        <img src="../assets/bags.png" alt="" class="activity--lcon">
        <span class="activity--commodity" v-for="(item, key) in phone" :key="key" @click="shoppingCart(key)">
        <img :src="item.prodImage[0]" alt=""><br>
        <span class="activityPrice">券后价</span>
      </span>
      </div>
      <div class="appliances">
        <img src="../assets/appliances.png" alt="" class="activity--lcon">
        <span class="activity--commodity" v-for="(item, key) in phone" :key="key" @click="shoppingCart">
        <img :src="item.prodImage[1]" alt=""><br>
        <span class="activityPrice">券后价</span>
      </span>
      </div>
      <div class="HomeTextiles">
        <img src="../assets/HomeTextiles.png" alt="" class="activity--lcon">
        <span class="activity--commodity" v-for="(item, key) in phone" :key="key" @click="shoppingCart(key)">
        <img :src="item.prodImage[3]" alt=""><br>
        <span class="activityPrice">券后价</span>
      </span>
      </div>
      <div class="motion">
        <img src="../assets/motion.png" alt="" class="activity--lcon">
        <span class="activity--commodity" v-for="(item, key) in phone" :key="key" @click="shoppingCart(key)">
        <img :src="item.prodImage[0]" alt=""><br>
        <span class="activityPrice">券后价</span>
      </span>
      </div>
      <div class="Digital">
        <img src="../assets/Digital.png" alt="" class="activity--lcon">
        <span class="activity--commodity" v-for="(item, key) in Recommend" :key="key" @click="shoppingCart(key)">
        <img :src="item.prodImage[0]" alt=""><br>
        <span class="activityPrice">券后价</span>
      </span>
      </div>
    </div>
    <div class="block"></div>
    <div class="Recommend">
      <span class="Limited--text">为你推荐</span>
      <div class="Recommend--box" v-for="(item, key) in Recommend" :key="key" @click="shoppingCart(key)">
        <img :src="item.prodImage[1]" alt="">
        <span>{{item.prodSubTitle}}</span><br>
        <span>券后价</span>
        <span>&nbsp;￥71</span><br>
        <span>原价：￥101</span>
      </div>
    </div>
    <div class="block"></div>
  </div>
  </div>
</template>

<script>
export default {
  name: "classification",
  data() {
    return {
      img: [],
      image: [],
      phone: [],
      Recommend: [],
      active: 0,
      bsl: null
    }
  },
  mounted(){
    this.$apis.product({
      prodCategory: 'beauty',
      prodSubClass: 'cosmetics',
      startIndex: 0,
      count: 3,
    })
      .then( data => {
        this.phone = data.data.data;
      })
      .catch(error => {
        console.log(error);
      });
    this.$apis.product({
      prodCategory: 'beauty',
      prodSubClass: 'mask',
      startIndex: 0,
      count: 4,
    })
      .then( data => {
        this.Recommend = data.data.data;
      })
      .catch(error => {
        console.log(error);
      });
  },
  methods: {
    shoppingCart(key) {
      this.$router.push({name: 'cart', params: {
        data: this.phone[key],
      }});
    },
    LimitedTime(){
      this.$router.push({name: 'Limitedtime'});
    }
  },
  created() {
    this.$nextTick(() => {
      if (!this.bsl) {
        this.bsl = new this.$BScroll(this.$refs.con, {
          scrollX:true,
          scrollY: true,
          click: true,
        })
      }else {
        this.bsl.refresh();
      }
    });
    this.$apis.RotationChart()
      .then(data => {
        this.img = data.data.data;
      })
      .catch(error => {
        console.log(error);
      });
    this.$apis.SpikeMerchandise()
      .then(data => {
        this.image = data.data.data;
        console.log(data);
      })
      .catch(error => {
        console.log(error);
      });
  }
}
</script>

<style scoped>
  .Slide--lb{
    position: relative;
    top: 10px;
  }
  .Slide--box>img{
    display: inline-block;
    width: 100vw;
    height: 4.04rem;
  }
  .classification{
    width: 10rem;
    height: 2.41333rem;
    font-size: 0;
    position: relative;
    top: 10px;
  }
  .classification>ul>li{
    display: inline-block;
    width: 2rem;
    height: 2.41333rem;
    list-style: none;
    float: left;
  }
  .image{
    display: inline-block;
    position: relative;
    width: 1.2666rem;
    height: 1.2666rem;
    border-radius: 50%;
    left: .35rem;
    top: .23rem;
  }
  .tips{
    font-size: .35rem;
    width: 1.2666rem;
    text-align: center;
    position: relative;
    left: .3rem;
    top: .45rem;
    color: #5a5a5a;
  }
  .RushToBuy{
    width: 100vw;
    height: 2.8rem;
  }
  .RushToBuy--Violet{
    width: 4.48rem;
    height: 2.41rem;
    background: #e3d0fb;
    position: relative;
    float: left;
    left: .28rem;
    border-radius: .25rem;
  }
  .RushToBuy--Blue{
    width: 4.48rem;
    height: 2.41rem;
    background: #c5ddfc;
    position: relative;
    float: left;
    left: .8rem;
    border-radius: .25rem;
  }
  .block{
    width: 100vw;
    height: .2rem;
    background: #f3f3f3;
  }
  .Limited{
    width: 100vw;
    height: 105px;
  }
  .Limited--text{
    display: block;
    font-size: 30px;
    line-height: 105px;
    position: relative;
    left: 29px;
    color: #2b2b2b;
  }
  .Limited--time{
    display: block;
    font-size: 24px;
    position: relative;
    left: 430px;
    top: -60px;
  }
  .Limited--time>span:nth-child(2),.Limited--time>span:nth-child(4),.Limited--time>span:nth-child(6){
    display: inline-block;
    width: 29px;
    height: 29px;
    background-color: #438ef7;
    color: white;
    line-height: 29px;
    text-align: center;
    font-size: 20px;
    border-radius: 4px;
  }
  .Limited--image{
    position: relative;
    display: inline-block;
    height: 225px;
    width: 30rem;
  }
  .Limited--image>span{
    display: inline-block;
    position: relative;
    width: 189px;
    background: white;
    height: 225px;
    box-shadow:0px 0px 2px #e2e2e2;
    margin-left: 45px;
  }
  .Limited--box>img{
    display: inline-block;
    width: 188px;
    height: 173px;
    z-index: 9;
  }
  .activity{
    display: inline-block;
    font-size: 30px;
    line-height: 105px;
    position: relative;
    width: 20rem;
    color: #2b2b2b;
    overflow: hidden;
  }
  .betterScroll{
    overflow: hidden;
    width: 100vw;
    height: 85vh;
    top: 120px;
    /*position: relative;*/
    /*top: 1.56rem;*/
  }
  .activity--lcon{
    display: block;
    width: 698px;
    height: 129px;
    position: relative;
    left: 26px;
    background: cadetblue;
  }
  .activity--commodity{
    display: inline-block;
    width: 100vw;
    height: 285px;
    position: relative;
    top: 42px;
  }
  .PostCouponPrice{
    display: inline-block;
    position: relative;
    background: #5590f1;
    width: 77px;
    height: 29px;
    border-radius: 10px;
    font-size: 16px;
    text-align: center;
    line-height: 29px;
    color: white;
    top: 20px;
    left: 10px;
  }
  .activity--commodity{
    display: inline-block;
    position: relative;
    width: 200px;
    background: white;
    height: 225px;
    margin-left: 40px;
  }
  .activity--commodity>img{
    display: inline-block;
    width: 188px;
    height: 173px;
  }
  .activityPrice{
    display: inline-block;
    position: relative;
    background: #5590f1;
    width: 77px;
    height: 29px;
    border-radius: 10px;
    font-size: 16px;
    text-align: center;
    line-height: 29px;
    color: white;
    top: -60px;
    left: 20px;
  }
  .newYear{
    display: block;
    width: 200vw;
    height: 420px;
    position: relative;
  }
  .Department{
    display: block;
    width: 200vw;
    height: 420px;
    position: relative;
  }
  .WristWatch{
    display: block;
    width: 200vw;
    height: 420px;
    position: relative;
  }
  .appliances{
    display: block;
    width: 200vw;
    height: 420px;
    position: relative;
  }
  .HomeTextiles{
    display: block;
    width: 200vw;
    height: 420px;
    position: relative;
  }
  .motion{
    display: block;
    width: 200vw;
    height: 420px;
    position: relative;
  }
  .Digital{
    display: block;
    width: 200vw;
    height: 420px;
    position: relative;
  }
  .Recommend--box{
    display: block;
    width: 100vw;
    height: 220px;
    position: relative;
    left: 25px;
  }
  .Recommend--box>img{
    display: inline-block;
    position: relative;
    width: 187px;
    height: 180px;
  }
  .Recommend--box>span:nth-child(2) {
    position: relative;
    width: 474px;
    height: 187px;
    display: block;
    right: 0;
    left: 70px;
    font-size: 27px;
    margin: auto;
    top: -180px;
  }
  .Recommend--box>span{
    font-size: 25px;
    position: relative;
    left: 205px;
    top: -280px;
  }
  .Recommend--box>span:nth-child(4){
    display: inline-block;
    position: relative;
    background: #5590f1;
    width: 77px;
    height: 29px;
    border-radius: 10px;
    font-size: 16px;
    text-align: center;
    line-height: 29px;
    color: white;
    margin-top: 50px;
  }
  .Recommend--box>span:nth-child(5){
    color: #5590f1;
    position: relative;
  }
  .Recommend--box>span:nth-child(7){
    position: relative;
    display: inline-block;
    margin-top: 10px;
    color: #d2d2d2;
  }
</style>
